<template>
  <div class="profile">
    <!-- 头部信息 -->
    <div class="user-info">
      <!-- 头像 -->
      <div class="avatar">
        <img :src='headImg' alt="">
      </div>
      <!-- 信息 -->
      <div class="info">
        <p class="name">
          <i v-if="profile.gender === 1" class="iconfont iconxingbienan"></i>
          <i v-else  class="iconfont iconxingbienv"></i>
          <span>{{ profile.nickname }}</span>
        </p>
        <p class="time">{{ profile.create_date | time }}</p>
      </div>
      <!-- 右箭头 -->
      <div class="icon">
        <i class="iconfont iconjiantou1"></i>
      </div>
    </div>
    <!-- 下面列表 -->
    <div class="list">
        <hm-nav  name='我的关注' info='关注的用户'></hm-nav>
        <hm-nav  name='我的跟帖' info='跟帖 / 回复'></hm-nav>
        <hm-nav  name='我的收藏' info='文章 / 视频'></hm-nav>
        <hm-nav  name='设置' ></hm-nav>
    </div>
    <!-- 退出功能 -->
    <div class="logout-btn">
      <van-button type='info' size='large' round @click='logout'>退出</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      profile: {} // 给个空对象
    }
  },

  async created () {
    // 从本地读取需要的 id 和 token
    const userId = localStorage.getItem('user_id')
    const token = localStorage.getItem('token')
    // 发送请求获取个人信息的数据,需要携带上token令牌
    // 只要是需要权限认证的,都需要带上令牌(如何携带令牌,有规范的 => 放在请求头 Authorization 字段中)

    const res = await this.$axios.get(`/user/${userId}`, {
      // 配置请求时的请求头
      headers: {
        Authorization: token
      }
    })
    console.log(res)
    const { statusCode, data } = res.data
    if (statusCode === 200) {
      this.profile = data // 这是把数据,放到 profile空对象里
      console.log(this.profile)
    }
  },
  // 退出功能
  methods: {
    async logout () {
      try {
        // 确认消息提示
        // await 只会等待成功的结果,只要能被await等到,说明用户点了确认
        await this.$dialog.confirm({
          title: '温馨提示',
          message: '你确定要退出吗???'
        })
        // 只要能执行到这里,说明用户点击了确定
        // 销毁登录状态
        localStorage.removeItem('user_id')
        // 跳转到登录
        this.$router.push('/login')
      } catch (e) {
        console.log(e)
      }
    }
  },
  // 计算属性 => 头像
  computed: {
    headImg () {
      return this.$axios.defaults.baseURL + this.profile.head_img
    }
  }
}
</script>

<style lang="scss" scoped>
.profile {
  .user-info {
    display: flex;
    padding: 20px;
    border-bottom: 3px solid #ccc;
    .avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      overflow: hidden;
    }
    .info {
      flex: 1;
      padding: 10px;
      p {
        height: 25px;
        left: 25px;
      }
      .name {
        font-size: 16px;
        color: #000;
        .iconxingbienan {
          color: #7ddcec;
          margin-right: 5px;
        }
        .iconxingbienv {
          color: pink;
          margin-right: 5px;
        }
      }
      .time {
        font-size: 14px;
        color: #999;
      }
    }
    .icon {
      width: 30px;
      height: 70px;
      line-height: 70px;
      text-align: center;
    }
  }
    .van-button {
      margin-top: 20px;
    }
}
</style>
